{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/index_news.css"> 
{% endblock %}
{% block content %} 
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("news_page_title"),level:2,icon:'eui-icon-grid btn-show-siderbar'} %} 
    {% include "../_base/page_header.html" %} 
    {% endblock %}
<div class="eui-main-container eui--padding-b-0 news-main-container">
    <div class="eui-page-banner eui--position-rel">
        <ul class="eui-bar-tab eui--clearfix">
            <li class="eui-tab-item">
                <a href="javascript:;" class="eui-tab-nav-link active">{{__("news_nav_about")}}</a>
            </li>
            <li class="eui-tab-item">
                <a href="javascript:;" class="eui-tab-nav-link">{{__("news_nav_vip")}}</a>
            </li>
            <li class="eui-tab-item">
                <a href="javascript:;" class="eui-tab-nav-link">{{__("news_nav_event")}}</a>
            </li>
            <li class="eui-tab-item">
                <a href="javascript:;" class="eui-tab-nav-link">{{__("news_nav_guid")}}</a>
            </li>
        </ul>
        <span class="eui-icon eui-icon-arrow_right"></span>
    </div>     
    <div class="eui-page-content eui--white-bacg">
        <ul class="eui-table-view news-list">
            {% for item in news.data %}
            <li class="eui-table-view-cell">
                {% if loop.index === 1 %}
                <a href="" class="eui--display-b eui--position-rel eui--warning-color eui--clearfix eui--font-26">                    
                {% elif loop.index === 2 %}
                <a href="" class="eui--display-b eui--position-rel eui--success-color eui--clearfix eui--font-26">
                {% elif loop.index === 3 %}
                <a href="" class="eui--display-b eui--position-rel eui--danger-color eui--clearfix eui--font-26">                    
                {% else %}                
                <a href="" class="eui--display-b eui--position-rel eui--black-color eui--clearfix eui--font-26">
                {% endif %}
                    <div class="eui-media-header eui--pull-left eui--position-rel">
                        <span class="eui-icon eui-icon-play-btn"></span>
                        <img class="eui-media-img eui--width-100" src="{{site.cdn}}/test-news-type.jpg">                        
                    </div>
                    <div class="eui-media-body">
                        <p class="eui--ellipsis">{{item.title}}}</p>
                    </div>
                    <div class="eui-media-footer">
                        <span class="eui-icon eui-icon-top"></span>                        
                        <!--<span class="eui-icon eui-icon-hot"></span>                        
                        <span class="eui-icon eui-icon-elite"></span>                                                -->
                        <span class="news-time eui--pull-right">{{item.update_time}}</span>
                    </div>
                </a>
            </li>
            {% endfor %}
        </ul>
        <a href="" class="eui-btn eui-btn-primary eui-btn-lg">{{__("btn_more")}}</a>        
    </div>   
</div>
<div class="eui-siderbar-wrapper eui-siderbar-fixed eui-siderbar-fixed-right eui--white-bacg" id="siderbar">
    <div class="eui-sider-bar eui--position-rel">
        <div class="eui-bar page-header">
            <div class="eui-bar-nav">
                <a href="javascript:;" class="eui-icon eui-icon-back" id="btn_back_siderbar"></a>
                <h1 class="page-title eui--text-center">{{__("all_game_page_title")}}</h1>
            </div>
        </div>
        <ul class="eui-table-view all-game-list">
            <li class="eui-table-view-cell">
                <div class="eui-media eui--display-flex">
                    <img class="eui-media-img" src="{{site.cdn}}/test-game-icon01.png" alt="">
                    <p class="eui--font-32 eui--black-color">中英梦想星城</p>
                </div>
            </li>
            <li class="eui-table-view-cell">
                <div class="eui-media eui--display-flex">
                    <img class="eui-media-img" src="{{site.cdn}}/test-game-icon01.png" alt="">
                    <p class="eui--font-32 eui--black-color">中英梦想星城</p>
                </div>
            </li>
            <li class="eui-table-view-cell">
                <div class="eui-media eui--display-flex">
                    <img class="eui-media-img" src="{{site.cdn}}/test-game-icon01.png" alt="">
                    <p class="eui--font-32 eui--black-color">中英梦想星城</p>
                </div>
            </li>
        </ul>
    </div>        
</div>  
<script>
    $('.btn-show-siderbar').click(function(){
        $('#siderbar').animate({
            "right":'0'
        },500);
    });
    $('#btn_back_siderbar').click(function(){
        $('#siderbar').animate({
            "right":'-100%'
        },500);
    });
</script>    
{% endblock %}